<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>工业数据采集</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            margin: 20px;  
        }  
        .control-panel {  
            margin-bottom: 20px;  
        }  
        button {  
            margin: 5px;  
            padding: 10px 15px;  
        }  
        .data-display {  
            margin-bottom: 20px;  
        }  
    </style>  
</head>  
<body>  

<h1>工业数据采集系统</h1>  

<div class="control-panel">  
    <button onclick="toggleAirConditioner()">空调开关</button>  
    <button onclick="toggleCooling()">制冷开关</button>  
    <button onclick="toggleHeating()">制热开关</button>  
    <button onclick="toggleCurtains()">窗帘开关</button>  
    <button onclick="toggleProjector()">投影屏开关</button>  
</div>  

<div class="data-display">  
    <p>温度: <span id="temperature">--</span> °C</p>  
    <p>湿度: <span id="humidity">--</span> %</p>  
    <p>光照: <span id="light">--</span> lx</p>  
    <button onclick="refreshData()">刷新数据</button>  
    <button onclick="reportData()">上报数据</button>  
</div>  

<script>  
    function toggleAirConditioner() {  
        alert("空调开关被切换！");  
        // 这里可以添加相应的逻辑和 API 调用  
    }  

    function toggleCooling() {  
        alert("制冷开关被切换！");  
        // 这里可以添加相应的逻辑和 API 调用  
    }  

    function toggleHeating() {  
        alert("制热开关被切换！");  
        // 这里可以添加相应的逻辑和 API 调用  
    }  

    function toggleCurtains() {  
        alert("窗帘开关被切换！");  
        // 这里可以添加相应的逻辑和 API 调用  
    }  

    function toggleProjector() {  
        alert("投影屏开关被切换！");  
        // 这里可以添加相应的逻辑和 API 调用  
    }  

    function refreshData() {  
        // 模拟数据更新  
        const temperature = (Math.random() * 30 + 10).toFixed(1); // 生成例如 10-40 的随机温度  
        const humidity = (Math.random() * 100).toFixed(1); // 生成例如 0-100 的随机湿度  
        const light = (Math.random() * 1000).toFixed(1); // 生成例如 0-1000 的随机光照强度  

        document.getElementById("temperature").innerText = temperature;  
        document.getElementById("humidity").innerText = humidity;  
        document.getElementById("light").innerText = light;  

        alert("数据已刷新！");  
    }  

    function reportData() {  
        const temperature = document.getElementById("temperature").innerText;  
        const humidity = document.getElementById("humidity").innerText;  
        const light = document.getElementById("light").innerText;  

        // 模拟上报数据  
        console.log("上报数据：");  
        console.log("温度:", temperature);  
        console.log("湿度:", humidity);  
        console.log("光照:", light);  
        alert("数据已经上报！");  
    }  
</script>  

</body>  
</html>